<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表格缩略图</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/module/admin.css?v=318"/>
    <style>
        #carousel + .layui-table-view .layui-table-body tbody > tr > td {
            padding: 0;
        }

        #carousel + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
            height: 48px;
            line-height: 48px;
        }

        .tb-img-circle {
            width: 120px;
            height: 40px;
            cursor: zoom-in;
            /*border-radius: 50%;*/
            /*border: 2px solid #dddddd;*/
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 数据表格 -->
            <table id="carousel" lay-filter="carousel"></table>
        </div>
    </div>
</div>
<%-- 表格工具栏 --%>
<script type="text/html" id="carouselTor">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-normal layui-btn-sm data-add-btn" lay-event="batchDel"><i
                class="layui-icon layui-icon-close"></i>批量删除
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="uploadImg"><i
                class="layui-icon layui-icon-add-1"></i>添加
        </button>
    </div>
</script>
<script type="text/html" id="carouselTbar">
    <a class="layui-btn layui-btn-danger layui-btn-xs data-count-edit" lay-event="del"><i
            class="layui-icon layui-icon-close"></i>删除</a>
</script>
<!-- js部分 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/common.js?v=318"></script>
<script>
    layui.use(['layer', 'table' , 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var upload = layui.upload;

        var tableIns = table.render({
            elem: '#carousel',
            url: '${pageContext.request.contextPath}/admin/carousel/list',
            toolbar: '#carouselTor',
            cols: [[
                {type: "checkbox", width: 50},
                {type: 'numbers'},
                {field: 'uuidName',
                    title: '预览图', templet: function (d) {
                        var url = d.uuidName;
                        return '<img src="${pageContext.request.contextPath}/imgs/' + url + '" class="tb-img-circle" tb-img alt=""/>';
                    }, align: 'center', width: 150, unresize: true
                },
                {field: 'imgName', title: '文件名', align: 'center'},
                {field: 'createDate', title: '创建时间', align: 'center', sort: true},
                {title: '操作', width: 120, toolbar: '#carouselTbar', align: "center"}
            ]],
            page: true,
            done: function (res, curr, count) {
                //判断当前页码是否是大于1并且当前页的数据量为0
                if (curr > 1 && res.data.length == 0) {
                    var pageValue = curr - 1;
                    //刷新数据表格的数据
                    tableIns.reload({
                        page: {curr: pageValue}
                    });
                }
            }
        });

        //监听头工具栏事件
        table.on("toolbar(carousel)",function (obj) {
            switch (obj.event) {
                case "batchDel"://批量删除
                    batchDel();
                    break;
            }
        });

        //设定文件大小限制
        var addImg = upload.render({
            elem: '#uploadImg'
            ,url: '${pageContext.request.contextPath}/admin/carousel/uploadImg' //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,exts: 'jpg|png|webp|jpeg' //只允许上传压缩文件
            ,size: 10240 //限制文件大小，单位 KB
            ,done: function(res){
                if(res.success){
                    //刷新数据表格
                    layer.msg(res.message);
                    window.setTimeout(function(){
                        window.location.reload();
                    },1500)
                }else {
                    layer.msg(res.message);
                }

            }
        });

        //监听行工具栏事件
        table.on("tool(carousel)",function (obj) {
            switch (obj.event) {
                case "del"://删除按钮
                    del(obj.data);
                    break;
            }
        });

        //批量删除
        function batchDel() {
            //获取选中行
            var checkStatus = table.checkStatus("carousel");
            //定义变量，保存选中行的数量
            var length = checkStatus.data.length;
            //判断当前是否有选中行
            if(length>0){
                //提示用户是否确认
                layer.confirm("确定删除吗?",{icon:3,title:"提示"},function (index) {
                    //获取选中行数据
                    var data = checkStatus.data;
                    //声明数组，保存选中行的ID值
                    var idArr = [];
                    //循环遍历选中行的数据
                    for (var i = 0; i < length; i++) {
                        //将选中行的ID放到数组中
                        idArr.push(data[i].id);
                    }
                    //将数组转换成字符串
                    var ids = idArr.join(",");
                    //发送请求
                    $.post("${pageContext.request.contextPath}/admin/carousel/batchDel",{"ids":ids},function(result){
                        if(result.success){
                            //刷新数据表格
                            tableIns.reload();
                        }
                        layer.msg(result.message);
                    },"json");
                });
            }else{
                layer.msg("请选择要删除的图片");
            }
        }

        //删除
        function del(data){
            layer.confirm("确定删除吗?",{icon:3,title:"提示"},function (index) {
                //发送删除请求
                $.post("${pageContext.request.contextPath}/admin/carousel/deleteImg",data,function(result){
                    if(result.success){
                        //刷新数据表格
                        tableIns.reload();
                    }
                    layer.msg(result.message);
                },"json");
            });
        }


        /* 点击图片放大 */
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            var imgList = table.cache['carousel'].map(function (d) {
                return {
                    alt: d.imgName,
                    src: "${pageContext.request.contextPath}/imgs/"+d.uuidName
                }
            });
            layer.photos({photos: {data: imgList, start: $(this).data('index')}, shade: .1, closeBtn: true});
        });

    });
</script>
</body>
</html>
